<template>
	<view>
		<view class="" style="height: 1rpx;"></view>
		<view class="box">
			<view class="invite-text">邀请您进入</view>
			<view class="name">{{invite.name}}</view>
			<view class="tint">{{invite.description}}</view>
			<view class="code-img">
				<image :show-menu-by-longpress="true" :src="oss(invite.image)" @click="previewImage" mode="aspectFit"></image>
			</view>
			<view class="ts">如遇碰到问题，欢迎联系客服</view>
			<view class="mobile" @longpress="copyText(invite.mobile)">{{invite.mobile}}</view>
			<view class="hint">（同微信号，长按号码可以复制）</view>
			<view class="wire"></view>
			<view class="scan-text">长按二维码，关注公众号</view>
			<view class="help-text">{{invite.introduce}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invite:''
			}
		},
		onLoad() {
			this.getinvite()
		},
		methods: {
			copyText(text) {
			      uni.setClipboardData({
			        data: text,
			        success() {
			          uni.showToast({
			            title: '已复制',
			            icon: 'none',
			          });
			        },
			        fail() {
			          uni.showToast({
			            title: 'Failed to copy.',
			            icon: 'none',
			          });
			        },
			      });
			    },
			previewImage(e) {
					console.log('e', e);
					uni.previewImage({
						// 需要预览的图片链接列表
						urls: [],
						// 为当前显示图片的链接/索引值
						current: this.oss(invite.image),
						// 图片指示器样式	
						indicator:'default',
						// 是否可循环预览
						loop:false,
						// 长按图片显示操作菜单，如不填默认为保存相册
						// longPressActions:{
						// 	itemList:[this.l('发送给朋友'),this.l]
						// },
						success: res => {
							console.log('res', res);
						}, 
						fail: err => {
							console.log('err', err);
						}
					});
			},
			getinvite(){
				uni.$u.http.post('/index/invite').then(res => {
					if (res.code == 1) {
						this.invite = res.data
					}
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
.box {
	width: 538rpx;
	padding: 0 42rpx;
	height: 1095rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
	margin: auto;
	margin-top: 108rpx;
	
	.invite-text {
		font-size: 30rpx;
		padding-top: 54rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}
	.name {
		font-size: 38rpx;
		margin-top: 16rpx;
		text-align: center;
		font-weight: bold;
		color: #333333;
	}
	.tint {
		font-size: 24rpx;
		text-align: center;
		padding-top: 24rpx;
		font-weight: 500;
		color: #999999;
	}
	.code-img {
		width: 391rpx;
		height: 391rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin: auto;
		margin-top: 48rpx;
		background-color: #F6F6F6;
		image {
			width: 391rpx;
			height: 391rpx;
		}
	}
	.ts {
		font-size: 22rpx;
		text-align: center;
		margin-top: 48rpx;
		font-weight: 500;
		color: #999999;
	}
	.mobile {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		padding-top: 16rpx;
	}
	.hint {
		font-size: 24rpx;
		text-align: center;
		padding-top: 16rpx;
		font-weight: 500;
		color: #999999;
	}
	.wire {
		width: 558rpx;
		height: 0rpx;
		opacity: 1;
		border: 1rpx solid #F0F0F0;
		margin-top: 40rpx;
	}
	.scan-text {
		font-size: 22rpx;
		text-align: center;
		font-weight: 500;
		color: #999999;
		margin-top: 40rpx;
	}
	.help-text {
		font-size: 22rpx;
		text-align: center;
		font-weight: 500;
		color: #999999;
		margin-top: 16rpx;
	}
}
</style>